<template>
  <div class="collect-list" v-if="pageshow">
    <!-- 头部 -->
    <header>
      <i class="iconfont icon-arrow-left" @click="changeShowAction"></i>
      <h3>{{ name }}</h3>
    </header>
    <!-- 收藏列表 -->
    <div class="collect-info">
      <h3>{{ name }} ({{ num }})</h3>
      <i class="iconfont icon-xie" @click="show1 = true"></i>
    </div>
    <van-swipe-cell>
      <router-link
        class="list-item"
        v-for="(item, index) in list"
        :key="index"
        to="/detail"
      >
        <img :src="item.fengmian" class="left-item" />
        <div class="right-item">
          <div class="title">{{ item.title }}</div>
          <div class="msg">
            <span>{{ item.time }}</span>
            <span>{{ item.nandu }}</span>
          </div>
          <div class="userinfo">
            <img :src="item.avatar" />
            <p>{{ item.username }}</p>
          </div>
        </div>
      </router-link>
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" />
      </template>
    </van-swipe-cell>
    <van-swipe-cell>
      <router-link
        class="list-item"
        v-for="(item, index) in list"
        :key="index"
        to="/detail"
      >
        <img :src="item.fengmian" class="left-item" />
        <div class="right-item">
          <div class="title">{{ item.title }}</div>
          <div class="msg">
            <span>{{ item.time }}</span>
            <span>{{ item.nandu }}</span>
          </div>
          <div class="userinfo">
            <img :src="item.avatar" />
            <p>{{ item.username }}</p>
          </div>
        </div>
      </router-link>
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" />
      </template>
    </van-swipe-cell>
    <van-swipe-cell>
      <router-link
        class="list-item"
        v-for="(item, index) in list"
        :key="index"
        to="/detail"
      >
        <img :src="item.fengmian" class="left-item" />
        <div class="right-item">
          <div class="title">{{ item.title }}</div>
          <div class="msg">
            <span>{{ item.time }}</span>
            <span>{{ item.nandu }}</span>
          </div>
          <div class="userinfo">
            <img :src="item.avatar" />
            <p>{{ item.username }}</p>
          </div>
        </div>
      </router-link>
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" />
      </template>
    </van-swipe-cell>
    <van-swipe-cell>
      <router-link
        class="list-item"
        v-for="(item, index) in list"
        :key="index"
        to="/detail"
      >
        <img :src="item.fengmian" class="left-item" />
        <div class="right-item">
          <div class="title">{{ item.title }}</div>
          <div class="msg">
            <span>{{ item.time }}</span>
            <span>{{ item.nandu }}</span>
          </div>
          <div class="userinfo">
            <img :src="item.avatar" />
            <p>{{ item.username }}</p>
          </div>
        </div>
      </router-link>
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" />
      </template>
    </van-swipe-cell>
    <!-- 弹出层 -->
    <van-action-sheet
      v-model="show1"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
      :round="false"
      @select="onSelect"
    />
    <Overlay v-if="show2" @change="show2Action" :sureShow="sureShow" />
  </div>
</template>

<script>
import { Toast } from "vant";
import Overlay from "./overlay.vue";
import { CollectListApi } from "@/api/collect";
export default {
  components: {
    Overlay,
  },
  data() {
    return {
      name: "面条",
      num: "3",
      list: [
        {
          title: "新手必学阳春面",
          time: "15-30分钟",
          nandu: "零厨艺",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          username: "不会做饭的西瓜",
          fengmian:
            "https://cdn7.axureshop.com/demo/1934191/images/%E6%96%87%E4%BB%B6%E5%A4%B9%E8%8F%9C%E8%B0%B1/u1679.png",
        },
      ],
      show1: false,
      show2: false,
      actions: [{ name: "编辑名称" }, { name: "删除文件夹" }],
      pageshow: true,
      sureShow: "",
    };
  },
  methods: {
    onSelect(item, index) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show1 = false;
      this.show2 = true;
      this.sureShow = index;
    },
    onCancel() {
      Toast("取消");
    },
    changeShowAction() {
      this.pageshow = !this.pageshow;
    },
    show2Action(value) {
      this.show2 = value;
    },
    async findCollectList() {
      // console.log(this.$store.state.CollectName);
      try {
        let res = await CollectListApi({
          collect_name: this.$store.state.CollectName,
        });
        console.log(res);
      } catch (error) {}
    },
  },
  created() {
    this.findCollectList();
  },
};
</script>

<style scoped lang="scss">
.collect-list {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  header {
    height: 50px;
    line-height: 50px;
    i {
      font-size: 18px;
      position: absolute;
      left: 20px;
    }
    h3 {
      text-align: center;
      font-weight: 700;
    }
  }
  .collect-info {
    display: flex;
    height: 40px;
    line-height: 40px;
    padding: 0px 20px;
    font-size: 18px;
    justify-content: space-between;
  }
  .list-item {
    width: 100%;
    height: 90px;
    display: flex;
    padding: 10px 20px;
    color: #000;
    .right-item {
      padding: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        font-size: 16px;
      }
      .msg {
        font-size: 12px;
        line-height: 20px;
        span {
          padding: 2px 5px;
          line-height: 30px;
          background-color: #f8f8f8;
          margin-right: 10px;
          border-radius: 5px;
          color: #9c9eaf;
        }
      }
      .userinfo {
        display: flex;
        font-size: 12px;
        line-height: 20px;
        color: #9c9eaf;
        p {
          padding-left: 10px;
        }
      }
      .delete-button {
        height: 100%;
      }
    }
  }
}
</style>
